@charset "utf-8";
@import "common";
.web{
   overflow: hidden;

}
section{
   width: 100%;
   left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   overflow-y: scroll;
   background: url(../img/background.png) repeat;
   background-size:r(640) r(1008) ;
   h3{
       font-size: r(32);
       color: #e7c598;
       text-align: center;
       margin-top: r(260);
       margin-bottom: r(40);
   }
   form{
       font-size: 0;
       div{
           width:r(340);
           margin: 0 auto r(12);
       }
      label{
          display: inline-block;
          width: r(168);
          height: r(40);
          text-align: left;
          text-indent: r(20);
          line-height: r(40);
          font-size: r(22);
          color: #bf0c21;
          background: #e7c598;
          margin-right: r(1);
          border-radius: r(10) 0 0 r(10);
      } 
      input[type='text']{
          width: r(168);
          height: r(40);
          display: inline-block;
          border: none;
          background: #e7c598;
          vertical-align: top;
          text-indent: r(10);
          font-size: r(22);
          line-height: r(40);
          border-radius:0 r(10)  r(10) 0;
      }
      input[type='button']{
        width: r(250);
        height: r(45);
        background: url(../img/submit.png) no-repeat;
        background-size:r(250)  r(45);
        display: block;
        margin: r(40) auto r(20);
      }
      p{
          font-size: r(18);
          color: #e7c598;
        text-align: center;
        line-height: r(30);
      }
      button{
            display: block;
            margin: r(32) auto 0;
            width: r(318);
            height: r(45);
            background: url(../img/dui.png) no-repeat;
            background-size:r(318) r(45); 
            color: #da8770;
            font-size: r(22);
            text-align: center;
            line-height: r(40);
        }
   }
    a{
        display: block;
        width: r(50);
        height: r(50);
        position: fixed;
        bottom: r(30);
        right: r(10);
        background: url(../img/btnreturn.png) no-repeat;
        background-size:r(50) r(50) ;
    }
}
.motai,.motai2,.motai3{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: rgba(106,0,1,.8);
    z-index: 1;
    transition: 200ms;
    .box{
        width: r(413);
        height: r(250);
        background: #e7c598;
        border-radius: r(12);
        @include auto();
        transition: 300ms;
        transform: translateY(-300%);
        h6{
            font-size: r(40);
            color: #bf0c21;
            text-align: center;
            line-height: r(45);
            margin-top: r(66);
            margin-bottom: r(30);
        };
        button{
            display: block;
            margin: r(14) auto 0;
            width: r(224);
            height: r(40);
            color: #e7c598;
            font-size: r(22);
            text-align: center;
            line-height: r(40);
            background: #bf0c21;
            border-radius: r(10);
        }
        input:last-of-type{
            width: r(36);
            height: r(36);
            border-radius: 50%;
            position: absolute;
            right: r(16);
            top: r(12);
            background: url(../img/btnclose.png) no-repeat;
            background-size:r(36) r(36) ;
        }
    }
}
.transition{
    transform: translateX(0%);
    z-index: 3;
    .box_tran{
        transform: translateY(0%);
    }
}